<!--地图组件封装-->
<template>
  <div id="Map"></div>
</template>
<script>
import ZhuZhou from '../../../assets/json/zhuzhou.json';
export default {
  name: 'Map',
  data () {
    return {
      // 地图配置项
      option: {
        tooltip: {
          trigger: 'item',
          // formatter: '{b}:{c}',
          formatter: function (params) {
            return '<div>' + params.marker + params.name + '：&nbsp;' + params.value + '</div>';
          },
          textStyle: {
            color: "rgba(255, 255, 255, .75)",
            fontSize: 10
          },
        },
        visualMap: {
          min: 0,
          max: this.max,
          realtime: false,
          calculable: true,
          itemWidth: 5,
          textStyle: {
            color: '#fff'
          },
          inRange: {
            // color: ['#0614A9', '#0076FF', '#00E1FF']
            color: ['#0153B7', '#59B3FF']
            // color: ["#2CB0AA", "#306FD1", "#8875E1", "#D95450"],
          },
        },
        series: [
          {
            type: 'map',
            mapType: 'ZhuZhou', // 自定义扩展图表类型
            label: {
              position: 'insideRight',
              show: true,
              color: '#fff'
            },
            data: this.mapData
            // data: [
            //   { name: '中西区', value: 20057.34 },
            //   { name: '湾仔', value: 15477.48 },
            //   { name: '东区', value: 31686.1 },
            //   { name: '南区', value: 6992.6 },
            //   { name: '油尖旺', value: 44045.49 },
            //   { name: '深水埗', value: 40689.64 },
            //   { name: '九龙城', value: 37659.78 },
            //   { name: '黄大仙', value: 45180.97 },
            //   { name: '观塘', value: 55204.26 },
            //   { name: '葵青', value: 21900.9 },
            //   { name: '荃湾', value: 4918.26 },
            //   { name: '屯门', value: 5881.84 },
            //   { name: '元朗', value: 4178.01 },
            //   { name: '北区', value: 2227.92 },
            //   { name: '大埔', value: 2180.98 },
            //   { name: '沙田', value: 9172.94 },
            //   { name: '西贡', value: 3368 },
            //   { name: '离岛', value: 806.98 }
            // ],
            // nameMap: {
            //   'Central and Western': '中西区',
            //   'Eastern': '东区',
            //   'Islands': '离岛',
            //   'Kowloon City': '九龙城',
            //   'Kwai Tsing': '葵青',
            //   'Kwun Tong': '观塘',
            //   North: '北区',
            //   'Sai Kung': '西贡',
            //   'Sha Tin': '沙田',
            //   'Sham Shui Po': '深水埗',
            //   Southern: '南区',
            //   'Tai Po': '大埔',
            //   'Tsuen Wan': '荃湾',
            //   'Tuen Mun': '屯门',
            //   'Wan Chai': '湾仔',
            //   'Wong Tai Sin': '黄大仙',
            //   'Yau Tsim Mong': '油尖旺',
            //   'Yuen Long': '元朗'
            // }
          }
        ]
      }
    };
  },
  props: ['mapData', 'name', 'max'],
  created () {
    console.log(this.mapData, this.name, this.max, '传过来的')
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    // 画地图
    drawLine () {
      this.$echarts.registerMap('ZhuZhou', ZhuZhou);
      let myChart = this.$echarts.init(document.getElementById('Map'));
      myChart.setOption(this.option);
    }
  }
};
</script>

<style scoped>
#Map {
    width: 400px;
    color: rgba(255, 255, 255, 1);
    height: 770px;
    margin: 0 auto;
}
</style>